<template>
	<comRoot>
		<template #page>
			<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/page-bg.png`" class="bg" />
			
			<comDetailNavigateBack title="积分赏" />
			
			<view class="integral-reward-box relative font-hanserif-bold">
				<view class="tabbar-box flex">
					<view class="tabbar-box-item flex relative" v-for="(item, index) in tabAreaList" :key="index" @click="tabTypeClickFun(item.id)">
						<image class="bg" :src="tabIndex === item.id ? `${commonConfigs.domainFrontFileLink}/files/images/common/shop-tab-active.png` : `${commonConfigs.domainFrontFileLink}/files/images/common/shop-tab.png`" mode=""> </image>
						<text :class="['relative font-hanserif-bold flex-all-center', tabIndex === item.id ? 'current-active' : '']" style="width: 100%;height: 100%;">{{ item.name }}</text>
					</view>
				</view>
				
				<scroll-view scroll-y class="scroll-y" @scrolltolower="scrolltolower" :style="{ height: 'calc(100vh - ' + commonNavHeight + ' - 112rpx)' }">
					<view v-if="resLists && resLists.length">
						<comIntegralList :resLists="resLists" />
						<view class="loadmore-txt">
							<comLoadMore class="loadmore-txt" :loading="loading" :showLoadendTxt="showLoadendTxt"></comLoadMore>
						</view>
					</view>
					<comEmptyData v-else-if="resLists && !resLists.length && !loading"></comEmptyData>
					<comLoading style="width: 100%;height: 100%;" v-if="loading"></comLoading>
				</scroll-view>
			</view>
		</template>
	</comRoot>
</template>

<script>
	import store from '@/store';
	import { geRewardPoolTypeApi, geRewardPoolInfiniteApi } from '@/setupproject/INTERFACE.js';
	import pager from '@/inmixed/paging.mixin.js';
	
	export default {
		name: 'integralRewardPage',
		mixins: [pager],
		data() {
			return {
				loading: true,
				tabIndex: '',
				tabAreaList: [],
			};
		},
		onLoad() {
			this.geRewardPoolTypeApi();
		},
		watch: {
			tabIndex(v) {
				this.resLists = [];
				/* paging.mixin.js Methods */
				if(this.tabIndex) {
					this.pagingInitFun();
					this.resListsGetFun();
				}
				
			}
		},
		computed: {
			showLoadendTxt() {
				return this.isShowPageLoadedTxt && !this.loading && this.resLists.length ? true : false;
			},
			commonNavHeight() {
				return store.getters.commonNavHeight + 'px';
			},
			commonConfigs() {
				return store.getters.commonConfigs || {};
			},
		},
		methods: {
			tabTypeClickFun(id) {
				this.tabIndex = id;
			},
			
			gooDetailPage(id) {
				uni.navigateTo({
					url: `/secondary/shopInfoPage/shopInfoPage?id=${id}`
				});
			},
			
			async listsGetFun() {
				if(!this.tabIndex) return;
				
				this.loading = true;
				const { data, code } = await geRewardPoolInfiniteApi({ 
					page: this.pageInfoObj.page, 
					page_size: this.pageInfoObj.page_sizes,
					reward_pool_type_id: this.tabIndex, 
					pack_name: this.commonConfigs.appPackageName,
					version: this.commonConfigs.appPackageVer,
					platform: uni.getSystemInfoSync().platform,
				});
				
				setTimeout(()=>{ this.loading = false }, 0);
				data.resLists = data.list || [];
				data.count = data.total;
				
				return data;
			},
			
			// 获取分类
			async geRewardPoolTypeApi() {
				const { data, code } = await geRewardPoolTypeApi({
					pool_type: 3,
					pack_name: this.commonConfigs.appPackageName,
					version: this.commonConfigs.appPackageVer,
					platform: uni.getSystemInfoSync().platform,
				});

				if (code !== 200) return;

				this.tabIndex = data.reward_pool_type && data.reward_pool_type[0] ? data.reward_pool_type[0].id : '';
				this.tabAreaList = data.reward_pool_type;
			},
			
		}
	};
</script>

<style lang="scss" scoped>
	.integral-reward-box {
		.tabbar-box {
			margin-bottom: 12rpx;
			overflow-x: auto;
			
			&::-webkit-scrollbar {
				display: none;
			}
			
			.tabbar-box-item {
				width: 175rpx;
				height: 56rpx;
				font-weight: 800;
				font-size: 28rpx;
				
				margin: 0 20rpx;
				color: #E1E4E7;
				
				& > .current-active {
					color: #FFF;
				}

			}
		}

	}
</style>
